
<template>
    <!-- 面包屑 -->
    <el-breadcrumb separator="/" style="border-bottom: 1px solid #ccc;padding: 10px 0;margin-bottom:10px ;">
    <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item to="/oms/order"
      >订单</el-breadcrumb-item
    >
    <el-breadcrumb-item>退货申请处理</el-breadcrumb-item>
  </el-breadcrumb>

  <OmsApplySearch @SearchEmit="searchAction"/>
  <OmsList/>

  <el-table style="margin-bottom: 20px;" @selection-change="selectChange" :data="tableData" size="small">
    <el-table-column type="selection" width="55" />
    <el-table-column label="服务单号" prop="id"></el-table-column>
    <el-table-column label="申请时间" prop="createTime">
      <template #default="scope">
          <div>
            {{
              scope.row.createTime
                ? dayjs(scope.row.createTime).format("YYYY-MM-DD HH:mm:ss")
                : "/"
            }}
          </div>
        </template>
    </el-table-column>
    <el-table-column label="用户账号" prop="memberUsername"></el-table-column>
    <el-table-column label="退款金额" prop="productRealPrice">
      <template #default="scope">
        ￥{{ scope.row.productRealPrice }}
      </template>
    </el-table-column>
    <el-table-column label="申请状态" prop="status">
      <template #default="scope">
        {{ Order.statusEnum[scope.row.status] }}
      </template>
    </el-table-column>
    <el-table-column label="处理时间" prop="handleTime">
      <template #default="scope">
          <div>
            {{
              scope.row.handleTime
                ? dayjs(scope.row.handleTime).format("YYYY-MM-DD HH:mm:ss")
                : "/"
            }}
          </div>
        </template>
    </el-table-column>
    <el-table-column label="操作" fixed="right">
      <template #default="scope">
        <el-button size="small" @click="checkDetail(scope.row.id)">查看详情</el-button>
      </template>
    </el-table-column>
  </el-table>

  <el-row justify="space-between">
    <el-col :span="8">
      <el-select placeholder="批量操作" v-model="action">
        <el-option label="批量删除" value="0"></el-option>
      </el-select>
      <el-button type="primary" style="margin-left:10px" @click="confirmAction">确定</el-button>
    </el-col>

    <!-- 分页 -->
    <el-col :span="14">
    <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 30, 40]"
        :background="true"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        hide-on-single-page
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-col>
  </el-row>
</template>
<script setup lang="ts">
import OmsApplySearch from '@/components/c-oms/OmsApplySearch.vue';
import OmsList from '@/components/c-oms/OmsList.vue';
import { Order } from '@/request/api';
import * as dayjs from "dayjs";
import { ElMessage, ElMessageBox } from 'element-plus';
import { ref } from 'vue';
import { useRouter } from 'vue-router';

let currentPage = ref(1)
let pageSize = ref(10)
let total = ref(0)
let tableData = ref([])
// 子组件的搜索筛选表单
let form : Order.IreqOrderReturn = null
// 批量操作
let action = ref("0")
// 选中数据
let selected = ref([])

let router = useRouter()

const handleSizeChange = function(param){
  pageSize.value = param
  getTableData()
  
}
const handleCurrentChange = function(param){
  currentPage.value = param
  getTableData()
}
// 获取数据API
const getTableData = async function(){
  const result = await Order.OrderReturnListAPI({...form,pageNum:currentPage.value,pageSize:pageSize.value})
  tableData.value = result.list
  total.value = result.total
  if(tableData.value.length<=0){
    ElMessage.info("暂无数据")
  }
}

//创建时执行
getTableData() 

/**
 * @param 搜索表单
 * 类型：IreqOrderList
 */
const searchAction = async function(param:Order.IreqOrderReturn){
  // 触发自定义搜索事件
  form = param  
  currentPage.value = 1
  getTableData()
}
// 表格选择项
const selectChange = function(selection){
  selected.value = selection
}
// 查看详情
const checkDetail = function(id:number){
  router.push({path:"/oms/returnApplyDetail",query:{id}})
}
// 批量操作确认
const confirmAction = function(){
  if(selected.value.length<=0){
    ElMessage.info("请选择要操作的订单")
    return false
  }
    ElMessageBox({
      title:"提示",
      message:"是否进行删除操作",
      type:"warning",
      showCancelButton:true,
      beforeClose(action, instance, done) {
            if(action==="confirm"){
                tableData.value = tableData.value.filter((item,index)=>{
                  if(selected.value.indexOf(item)<0){
                    return true
                  }else{
                    total.value = total.value-1
                    return false
                  }
                  
                })     
              }
            // let result = selected.value.map(item=>{
            //   return item.id
            // })
            //   Order.OrderReturnDeleteAPI(result)
            done()
        },
    }).then(()=>{
      ElMessage.success("删除成功")
    })
}

</script> 
